<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"
	  xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui">

	<ui:composition template="/layouts/default.xhtml">

	<ui:define name="title">#{text['centroList.title']}</ui:define>  
	<ui:param name="menu" value="AdminMenu"/>

	<ui:define name="body">
		<div class="col-sm-10">
			<h2>#{text['centroList.heading']}</h2>

			<h:form id="searchForm" styleClass="form-inline"> 
				<div id="search" class="text-right">
					<span class="col-sm-9">
						<h:inputText id="q" size="20" value="#{centroAction.query}" styleClass="form-control input-sm" disabled="true"/>
					</span>
					<h:commandButton styleClass="btn btn-default btn-sm" action="#{centroAction.search}" value="#{text['button.search']}" disabled="true"/>
				</div>
			</h:form>

			<h:form id="centroListForm"> 

				<div id="actions" class="btn-group">
					<!-- <script> shows up here and causes square corners on the Add button below -->
					<h:commandButton action="/admin/centros/centroNuevo.xhtml" value="#{text['button.add']}" id="add"
									 styleClass="btn btn-primary">
						<f:param name="from" value="list"/>
					</h:commandButton>
					<h:commandButton value="#{text['button.done']}" action="home" id="cancel"
									 immediate="true" styleClass="btn btn-default">
					</h:commandButton>
				</div>

				<p:dataTable id="centros" var="centro" value="#{centroAction.centrosList}" sortBy="#{centroAction.sortColumn}"
							 paginator="true" rows="25"
							 paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
							 rowsPerPageTemplate="5,10,15">
							 
					 <p:column style="width: 25%">
						<f:facet name="header">
							<p:column sortBy="nombre">
								<h:outputText value="#{text['centroList.nombre']}"/>
							</p:column>
						</f:facet>
						
						<h:commandLink action="#{centroAction.centroDetalle}" value="#{centro.nombre}">
							<f:setPropertyActionListener target="#{centroAction.idCentro}" value="#{centro.id}" />
						</h:commandLink>
						<h:outputText value="id(#{centro.id})"/>
					</p:column>
					
					<p:column style="width: 25%">
						<f:facet name="header">
							<p:column sortBy="telefono1">
								<h:outputText value="#{text['centroList.telefono1']}"/>  
							</p:column>
						</f:facet>
						<h:outputText value="#{centro.telefono1}"/>
					</p:column>
					
					<p:column style="width: 25%">
						<f:facet name="header">
							<p:column sortBy="email">
								<h:outputText value="#{text['centroList.email']}"/> 
							</p:column>
						</f:facet>
						<h:outputText value="#{centro.email}"/>
					</p:column>
					
					<p:column style="width: 25%">
						<f:facet name="header">
							<p:column sortBy="personaContacto">
								<h:outputText value="#{text['centroList.personaContacto']}"/>
							</p:column>
						</f:facet>
						<h:outputText value="#{centro.personaContacto}"/>
					</p:column>
				</p:dataTable>
			</h:form>
		</div>
	</ui:define>
</ui:composition>
</html>
